import React, { useEffect, useRef, useState } from 'react'
import Footer from './components/Footer/Footer'
import Header from './components/Header/Header'
import List from './components/List/List'
import request from './http/request'
import './App.css'
export default function App() {
    let [todos, setTodos] = useState([]); // 定义状态数据todos
    async function getTodos(){
        let res = await request.get('/todos')
        console.log('res: ', res);
        // 设置状态
        setTodos(res);
    }
    useEffect(()=>{
        getTodos();
    },[])

    const addTodo = async (title)=>{
        console.log('app title: ', title);
        // 向服务器发送请求 post  {title,isDone:false}
        let todo = {
            title,
            isDone:false
        }
        await request.post('/todos', todo);// 添加数据
        getTodos();
    }
    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header  addTodo={addTodo}/>
                <List todos={todos}/>
                <Footer todos={todos}/>
            </div>
        </div>
    )
}
